vue2基础知识1

2023-07-12 18:47| 来源: 网络整理| 查看: 265

vue基础 1、vue是什么？ 2、vue基础指令 3、过滤器filters 4、侦听器 watch 5、计算输出 computed 1、vue是什么？

vue是一套构建用户界面的渐进式的，自底向上的前端框架；

1-1、vue的特性数据驱动视图双向数据绑定MVVM 1-2、vue的的基本使用引入vue.js在页面中声明一个将要被vue控制的dom区域创建 vue 实例对象 {{msg}} var app = new Vue({ el:'#app', data:{ msg:"hello" }, methods:{ doThis(){ console.log(this); console.log(this.data); console.log(this.msg); } } }) 2、vue基础指令

什么是指令？

指令是vue为开发者提供的模版语法，用于辅助开发者渲染页面的基本结构；

v-text 内容渲染指令v-html 把包含HTML标签的字符串渲染成 html 元素{{}} 插值表达指v-bind: 属性绑定指令，简写：英文冒号 :v-on 事件绑定,简写@click=“add”v-modal 表单数据绑定v-ifv-showv-for

你好

aaaaaaaaa

简单的运算反转 count.split(‘’).reverse().join(‘’)

v-on 事件绑定传参 +2 add(n){ this.count +=n }

如果在绑定事件时，没有传参；事件处理函数会默认传一个参数e,通过e.target可以获取操作的dom元素；

如果在绑定事件时，有传参，还想传参e,那就

+2 add(n,e){ this.count +=n }

事件修饰符

@click.prevent 阻止默认行为（如a链接的默认跳转）@click.stop 阻止冒泡行为（例如：父子元素都绑定了事件，点击子元素会先触发子元素的事件，再触发父元素的事件，这就叫冒泡）

按键修饰符例如在触发某个键盘时会触发事件

v-model 双向数据绑定

v-model 修饰符

.number 自动将用户输入的值转换成数值类型.trim 自动过滤掉用户输入的首尾空白字符.lazy 在change时更新而不是input时更改类似节流条件渲染 v-if和v-show的区别

根据条件按需来控制 dom 的显示和隐藏

v-ifv-show

区别

v-if 是动态的创建和销毁元素 v-show 是css样式来控制的

如果需要频繁的切换元素，使用v-show，性能优化；页面初始化时，条件为false时，使用 v-if ；

v-if 配套的指令 v-else-ifv-else v-for 循环数组

语法：

key的注意点

key的值是数值或字符串且不能重复，最好是id既提升性能，又防止列表状态混乱不能拿index当key值,索引不具有唯一性，数据与索引不是一成不变的，数据增加的话，同一个索引，值可能不一样了； index id 姓名年龄性别 {{index}} {{item.id}} {{item.name}} {{item.age}} {{item.sex}} data:{ list:[ {id:1,name:"zhangsan",age:52,sex:"nan"}, {id:2,name:"zhangyongseng",age:29,sex:"nv"} ] } 3、过滤器filters

vue3 已经废除了这个语法，只能在vue2中使用；作用：用于文本的格式化，用在两个地方：

插值表达式v-bind属性绑定

【注意】

过滤器函数必须放在filters节点下面；过滤器中必须有一个返回值过滤器中的参数永远是管道符|前面的值；

JS filters:{ capi(val){ return } }

过滤器分为私有过滤器和全局过滤器。在filters节点下的过滤器就是私有过滤器；只能在本页面挂载的区域中使用；

全局过滤器独立于每个vm实例之外，定义：

Vue.filter({过滤器名字，(val)=>{ return val }})

全局过滤器有两个参数，

第一个参数是过滤器名字第二个参数是过滤器处理函数过滤器中的参数永远是管道符|前面的值；过滤器中必须有一个返回值如果全局过滤器和私有过滤器名字一致，此时按照就近原则，调用私有过滤器

可以调用多个过滤器

4、侦听器 watch

侦听器作用：监听页面上的数据的变化，从而针对数据的变化做特定的操作；

注意：

定义在watch节点；要监视哪个数据的变化，就把哪个数据名作为方法名；

【应用场景】

1、判断用户名是否被占用

【侦听器的格式】

方法格式的侦听器缺点1，在页面初始化时，不能自动触发；缺点2，如果侦听的是对象，对象中的属性变化，不会触发侦听器； watch:{ username(newVal,oldVal){ console.log(newVal); } } 对象格式的侦听器 handler 是username的事件处理函数immediate:true;关键字可以在页面初始化时，自动触发；默认值是false； data:{ username:'' }, watch:{ username:{ handler(newVal,oldVal){ console.log(newVal); }, immediate:true; } }

如果监听的是对象，

方法一：想要监听到对象的子属性变化，开启深度监听deep属性： deep:true;方法二：监听对象的子属性变化，需要在对象.子属性外面包裹一层单引号； data:{ info{ username:'' } } //第一种 watch:{ info:{ handler(newVal,oldVal){ console.log(newVal.username); }, deep:true; } } //第二种 watch:{ 'info.username'(newVal,oldVal){ console.log('触发了监听函数') } } 5、计算属性 computed

什么是计算属性？通过一系列运算之后，最终得到的属性值；

使用场景

模版结构中，{{}}插值表达式；methods方法中直接使用；rgb计算属性在声明时是方法格式，return使用时rgb是一个属性；

好处：

实现了代码的复用只要依赖的数据源变化了，计算属性则会自动重新求值； computed:{ rgb(){ return } }

【本文地址】

公司简介

联系我们